<template>
	<div id="Register">
		<h2>欢迎新用户注册</h2>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item prop="username">
				<span slot="label">
					<span style="color: greenyellow">用户账号:</span>
				</span>
				<el-input v-model="ruleForm.username"></el-input>
			</el-form-item>
			<el-form-item prop="nickname">
				<span slot="label">
					<span style="color: greenyellow">用户昵称:</span>
				</span>
				<el-input v-model="ruleForm.nickname"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<span slot="label">
					<span style="color: greenyellow">密码:</span>
				</span>
				<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item prop="checkPass">
				<span slot="label">
					<span style="color: greenyellow">确认密码:</span>
				</span>
				<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item prop="tel">
				<span slot="label">
					<span style="color: greenyellow">电话:</span>
				</span>
				<el-input v-model="ruleForm.tel"></el-input>
			</el-form-item>

			<el-form-item prop="email">
				<span slot="label">
					<span style="color: greenyellow">邮箱:</span>
				</span>
				<el-input v-model="ruleForm.email"></el-input>
			</el-form-item>
			<el-form-item prop="sex">
				<span slot="label">
					<span style="color: greenyellow">性别:</span>
				</span>
				<el-radio-group v-model="ruleForm.sex">
					<el-radio label="男" value="男"></el-radio>
					<el-radio label="女" value="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="address">
				<span slot="label">
					<span style="color: greenyellow">籍贯:</span>
				</span>
				<el-cascader v-model="ruleForm.address" :options="options" :props="{ expandTrigger: 'hover' }"
					@change="handleChange"></el-cascader>
			</el-form-item>
			<el-form-item prop="description">
				<span slot="label">
					<span style="color: greenyellow">个人简介:</span>
				</span>
				<el-input type="textarea" v-model="ruleForm.description"></el-input>
			</el-form-item>
			<el-form-item class="last_footer">
				<el-button type="primary" @click="submitForm('ruleForm')" class="edit">提交</el-button>
				<el-button @click="resetForm('ruleForm')" class="edit">重置</el-button>
				<el-button type="primary" @click="cancel()" class="edit">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					username: '', //用户账号
					nickname: '', //用户昵称
					tel: '', //用户电话
					email: '', //用户邮箱
					address: '', //用户地址
					sex: '', //用户性别
					description: '', //用户简介
					file: '',
					password: '',
					checkPass: ''
				},
				activeIndex: '1',
				rules: {
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}, {
						validator: validatePass2,
						trigger: 'blur'
					}],
					nickname: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					username: [{
						required: true,
						message: '请输账号',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入籍贯',
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						message: '请输入电话',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}],
					description: [{
						required: true,
						message: '请填写个人简介',
						trigger: 'blur'
					}],
				},
				options: [],
			};
		},
		mounted() {
			this.options = [{
				value: '广东',
				label: '广东',
				children: [{
					value: '广州',
					label: '广州',
				}, {
					value: '深圳',
					label: '深圳',
				}, {
					value: '东莞',
					label: '东莞',
				}, {
					value: '湛江',
					label: '湛江',
				}, {
					value: '云浮',
					label: '云浮',
				}, {
					value: '其他',
					label: '其他',
				}]
			}, {
				value: '上海',
				label: '上海',
				children: [{
					value: '黄浦区',
					label: '黄浦区',
				}, {
					value: '卢湾区',
					label: '卢湾区',
				}, {
					value: '长宁区',
					label: '长宁区',
				}, {
					value: '其他',
					label: '其他',
				}]
			}, {
				value: '北京',
				label: '北京',
				children: [{
					value: '东城区',
					label: '东城区'
				}, {
					value: '西城区',
					label: '西城区'
				}, {
					value: '朝阳区',
					label: '朝阳区'
				}, {
					value: '其他',
					label: '其他'
				}]
			}]
		},
		created() {

		},
		methods: {
			submitForm(formName) {
				let _this = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						_this.editFlag = false;

						let url = "/api/mall/MemberServlet2?method=registerNewMember";
						let addressStr = ''
						if (Array.isArray(_this.ruleForm.address)) {
							addressStr = _this.ruleForm.address.join('/');
						}
						_this.$http.get(url, {
							params: {
								username: _this.ruleForm.username,
								nickname: _this.ruleForm.nickname, //用户昵称
								tel: _this.ruleForm.tel, //用户电话
								email: _this.ruleForm.email, //用户邮箱
								address: addressStr, //用户地址
								sex: _this.ruleForm.sex, //用户性别
								description: _this.ruleForm.description, //用户简介
								file: _this.ruleForm.file,
								password: _this.ruleForm.password
							}
						}).then(function(response) {
							console.log("submitForm 服务端返回的数据为:", response);
							if (response.data.code == 0) {
								let data = response.data.data;
								_this.$message.success("注册成功!可以马上登录");

								//注册成功跳转到登录页面
								_this.$router.push('/MemberLogin');
							} else {
								_this.$message(response.data.msg)
							}
						}).catch(function(error) {
							console.log("服务端产生异常为:", error);
							_this.$notify({
								title: '提示',
								message: "系统错误:" + error,
								duration: 2000
							});

						});

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			handleChange(value) {
				console.log(value);
			},
			cancel() {
				this.$router.push('/MemberLogin');
			},
		}
	}
</script>

<style scoped="scoped">
	* {
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
	}

	html,
	body {
		width: 100%;
		height: 100%;
	}

	#Register {
		/* width: 600px; */
		/* margin: 50px auto; */
		/* padding: 20px; */
		/* background-color: #ffd7c7;
		background: url(../assets/img/bg2.jpg) */
		align-items: center;
		background-color: var(--white);
		background: url("../assets/img/bg2.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		display: grid;
		height: 100vh;
		place-items: center;

	}

	.demo-ruleForm {
		font-size: 20px;
		text-align: left;
	}

	.el-form-item {
		font-size: 20px;
		margin: 15px;
	}

	.el-form-item__label {
		font-size: 20px !important;
	}

	.el-button {
		width: 50px;
		height: 25px;
	}

	.last_footer {
		text-align: center;
		padding-right: 40px;
	}
</style>
